<template>
    <navigator :url="`/pages/news_detail/news_detail?id=${newsId}`">
        <view class="news-card flex flex-col bg-white">
            <view v-if="item.image" class="news-image">
                <u-image :src="getImageUrl(item.image)" width="630rpx" height="250rpx" border-radius="16"></u-image>
            </view>
            <view class="news-card-content">
                <view class="news-card-content-title text-base font-bold">{{ item.title }}</view>
                <view class="text-muted text-xs w-full flex mt-[12rpx]">
                    <view>发布时间：{{ item.create_time }}</view>
                </view>
                <view class="text-muted text-xs w-full flex">
                    <view>村单位名：{{ item.village.name }}</view>
                </view>
            </view>
        </view>
    </navigator>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useAppStore } from '@/stores/app'

const { getImageUrl } = useAppStore()
const props = withDefaults(
    defineProps<{
        item: any
        newsId: number
    }>(),
    {
        item: {},
        newsId: ''
    }
)
</script>

<style lang="scss" scoped>
.news-card {
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 16rpx;

    &-content {
        margin: 10rpx 20rpx;

        &-title {
            -webkit-line-clamp: 2;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 30rpx;
            padding-bottom: 10rpx;
            border-bottom: 1rpx solid #eeeeee;
        }

        &-intro {
            -webkit-line-clamp: 1;

            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
}

.news-image {
    width: 100%;
    margin: 20rpx;
    position: relative;
    .news-cate {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10; /* 提高z-index确保在图片上方 */
        background-color: #1e88f8; /* 添加背景色提高可读性 */
        color: white; /* 设置文字颜色 */
        padding: 5rpx 10rpx; /* 添加内边距 */
        border-top-left-radius: 16rpx; /* 圆角与卡片一致 */
        border-bottom-right-radius: 16rpx;
        font-size: 22rpx;
    }

    .news-hits {
        position: absolute;
        right: 44rpx;
        bottom: 0;
        z-index: 10; /* 提高z-index确保在图片上方 */
        background-color: rgba(0, 0, 0, 0.4); /* 添加背景色提高可读性 */
        color: white; /* 设置文字颜色 */
        padding: 5rpx 10rpx; /* 添加内边距 */
        border-bottom-right-radius: 16rpx; /* 圆角与卡片一致 */
        border-top-left-radius: 16rpx;
        font-size: 22rpx;
    }
}
</style>
